<template>
  <div>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="名字">
        <el-input v-model="formInline.keyword" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="价格" required>
        <el-col :span="11">
          <el-form-item >
            <el-date-picker type="class" placeholder="最小值" v-model="formInline.minPrice" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-form-item >
            <el-date-picker type="class" placeholder="最大值" v-model="formInline.maxPrice" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="时间" required>
        <el-col :span="11">
          <el-form-item >
            <el-date-picker type="date" placeholder="选择日期" v-model="formInline.startTime" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-form-item >
            <el-date-picker type="date" placeholder="选择日期" v-model="formInline.endTime" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="车辆编号递增"
          width="150">
      </el-table-column>
      <el-table-column
          fixed
          prop="carNum"
          label="车辆编号"
          width="150">
      </el-table-column>
      <el-table-column
          prop="carVin"
          label="车辆Vin"
          width="120">
      </el-table-column>
      <el-table-column
          prop="carImg"
          label="车辆图片"
          width="120">
        <template slot-scope="scope">
          <el-image :src="scope.row.carImg"></el-image>
        </template>
      </el-table-column>
      <el-table-column
          prop="carTid"
          label="车辆类型id"
          width="120">
      </el-table-column>
      <el-table-column
          prop="carWid"
          label="车辆电子围栏id"
          width="300">
      </el-table-column>
      <el-table-column
          prop="carMotorNum"
          label="车辆电机编号"
          width="120">
      </el-table-column>
      <el-table-column
          prop="carBatteryNum"
          label="车辆电池编号"
          width="120">
      </el-table-column>
      <el-table-column
          prop="status"
          label="车辆状态"
          width="120">
      </el-table-column>
      <el-table-column
          prop="carSheng"
          label="省"
          width="120">
      </el-table-column>
      <el-table-column
          prop="carShi"
          label="市"
          width="120">
      </el-table-column>
      <el-table-column
          prop="carQu"
          label="区"
          width="120">
      </el-table-column>
      <el-table-column
          prop="licensePlate"
          label="车辆牌照号码"
          width="120">
      </el-table-column>
      <el-table-column
          prop="make"
          label="车辆品牌"
          width="120">
      </el-table-column>
      <el-table-column
          prop="make"
          label="车辆品牌"
          width="120">
      </el-table-column>
      <el-table-column
          prop="model"
          label="车辆型号"
          width="120">
      </el-table-column>
      <el-table-column
          prop="year"
          label="生产年份"
          width="120">
      </el-table-column>
      <el-table-column
          prop="color"
          label="车辆颜色"
          width="120">
      </el-table-column>
      <el-table-column
          prop="dailyRate"
          label="日租价格"
          width="120">
      </el-table-column>
      <el-table-column
          prop="lastMaintenanceDate"
          label="上次维修日期"
          width="120">
      </el-table-column>
      <el-table-column
          prop="createdAt"
          label="记录创建时间"
          width="120">
      </el-table-column>
      <el-table-column
          prop="updatedAt"
          label="记录最后更新时间"
          width="120">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template v-slot="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
          <el-button @click="goRent(scope.row)" type="text" size="small">租用</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  name: "CarView",
  data() {
    return {
      tableData:[],
      formInline:"",
      formLabelWidth:'120px',

    }
  }, methods: {
    //列表
      list(){
        this.axios.get("http://localhost:10018/car/list").then(res=>{
          console.log(res);
          this.tableData=res.data.data;
        })
      },
    //跳转租用页面
    goRent(res){
      console.log(res);
      this.$router.push({name:'carOrder3',params:{row:res}})
    },
  }, created() {
       this.list();
  }
}
</script>

<style scoped>

</style>
